<style>
    * {padding:0; magrin:0;}
</style>

<div>
    <div class="person_img">
        <!--now we are going to use script to add the health data dynamically-->
        <img src="images/male.png" style="width:100%;height:100%;margin:0 auto;" />        
    </div>
    <ul class="list inset" style="border-style:solid; border-width:2px; border-color:red;">
        <li>
            <label class="label-inline" style='border-color:green;'>姓名</label>
            <input class="user-name" type="text" style='border-color:green;'>
        </li>
        <li>
            <label class="label-inline">称谓</label>
            <select id="user-nickname" style="-webkit-appearance: listbox;" multiple="multiple">
                <option value="1">自己</option>
                <option value="2">其他</option>
            </select>
        </li>
        <li>
            <label class="label-inline">年龄</label>
            <input class="wide-control user-age" placeholder="年龄" type="text">
        </li> 
        <li>
            <label class="wide-control label-inline">性别</label>
            <div>
                <input class="wide-control toggle user-gender" value="0" id="gender-input" type="checkbox">
                <label class="wide-control label-inline" for="gender-input" data-on="男" data-off="女">
                    <span></span>               
                </label>
            </div>
        </li>
        <li>
            <label class="wide-control label-inline">出生日期</label>
            <input class="wide-control user-birth-date" id='birthDate' type='date'/>
        </li>  
        <li>
            <label class="wide-control label-inline">身高</label>
            <input class="wide-control user-height" type="text"/>
        </li> 
        <li>
            <label class="wide-control label-inline">体重</label>
            <input class="wide-control user-weight" type="text"/>
        </li>    
        <li class="divider" style="background:#999;font-size:9px" >健康数据</li>
        <li>
            <label >过敏史</label>
            <input class="wide-control user-allergy" placeholder="过敏史" type="text" onclick="selectAllergy();">
        </li>
        <li>
            <label >慢性病史</label>
            <input class="wide-control user-disease" placeholder="慢性病史" type="text" onclick="selectIssues();">
        </li>
        <li>
            <label >生活习惯</label>
            <input class="wide-control user-living-habit" placeholder="生活习惯" type="text" onclick="selectLivingHabits();">
        </li>
        <li>
            <label >饮食习惯</label>
            <input class="wide-control user-eating-habit" placeholder="饮食习惯" type="text" onclick="selectEatingHabbits();">
        </li>
        <li>
            <label >身体问题</label>
            <input class="wide-control user-issues" placeholder="身体问题" type="text" onclick="selectHealthIssues();">
        </li>
        <div style="width:80%;margin:0 auto;" onclick="uploadPersonProfile();">
        	<img src="images/save_btn.png" style="width:100%;" />
        </div>
    </ul>    
</div>